<template>
    <perfect-scrollbar class="decorate-edit-con">
        <div class="dec-edit-title">
            <h3>店铺信息</h3>
        </div>
        <div class="dec-edit-group special">
            <div class="dec-edit-group-title">
                <div class="label">指示器样式</div>
                <div class="value">{{ shopInfoStyle[module.style] }}</div>
            </div>
            <div class="dec-edit-group-con">
                <el-radio-group class="dec-radio-group" v-model="module.style">
                    <el-radio-button :value="1">样式一</el-radio-button>
                    <el-radio-button :value="2">样式二</el-radio-button>
                    <el-radio-button :value="3">样式三</el-radio-button>
                    <el-radio-button :value="4">样式四</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="dec-edit-group special">
            <div class="dec-edit-group-title">
                <div class="label">背景图</div>
                <div class="value">{{ pic_text[module.background_default] }}</div>
            </div>
            <div class="default-pic-box">
                <div
                    class="default-pic-box-item"
                    @click="handleChangeBg(index + 1)"
                    :class="{ active: module.background_default == index + 1 }"
                    v-for="(item, index) in imgList"
                    :key="index"
                >
                    <img class="img-box" :src="item" />
                </div>
            </div>
            <div class="custom-btn">
                <el-radio-group class="dec-radio-group" v-model="module.background_default">
                    <el-radio-button :value="0">自定义</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <template v-if="module.background_default == 0">
            <div class="shop-info-title">自定义背景图片</div>
            <div class="dec-edit-group">
                <div class="dec-edit-group-title">
                    <div class="label special">背景图片</div>
                    <div class="value"></div>
                </div>
                <div class="dec-edit-group-con">
                    <PicSelect v-model:photo="module.custom_pic"></PicSelect>
                </div>
            </div>
        </template>
    </perfect-scrollbar>
</template>
<script lang="ts" setup>
import CommonFrameEdit from "./src/CommonFrameEdit.vue";
import { PicSelect } from "@/components/decorate";
import { ModuleType } from "@/types/decorate/decorate.d";
import { ref, defineModel, watch } from "vue";
import img1 from "@/views/decorate/decorate/src/img/bg/1.jpg";
import img2 from "@/views/decorate/decorate/src/img/bg/2.jpg";
import img3 from "@/views/decorate/decorate/src/img/bg/3.jpg";
import img4 from "@/views/decorate/decorate/src/img/bg/4.jpg";
import img5 from "@/views/decorate/decorate/src/img/bg/5.jpg";
import img6 from "@/views/decorate/decorate/src/img/bg/6.jpg";
import img7 from "@/views/decorate/decorate/src/img/bg/7.jpg";
import img8 from "@/views/decorate/decorate/src/img/bg/8.jpg";
import img9 from "@/views/decorate/decorate/src/img/bg/9.jpg";
import img10 from "@/views/decorate/decorate/src/img/bg/10.jpg";
const imgList = ref([img1, img2, img3, img4, img5, img6, img7, img8, img9, img10]);
const module = defineModel<ModuleType>("module", { default: () => ({}) });
console.log("module", module.value);
const shopInfoStyle = ref({
    1: "样式一",
    2: "样式二",
    3: "样式三",
    4: "样式四"
});

const pic_text = ref({
    0: "自定义",
    1: "风格一",
    2: "风格二",
    3: "风格三",
    4: "风格四",
    5: "风格五",
    6: "风格六",
    7: "风格七",
    8: "风格八",
    9: "风格九",
    10: "风格十"
});
const handleChangeBg = (val: number) => {
    module.value.background_default = val;
};
</script>
<style lang="less">
.dec-edit-group {
    &.special {
        flex-direction: column;

        .dec-edit-group-title {
            margin-bottom: 10px;
        }

        .dec-radio-group {
            width: 100%;
        }
    }
}

.label {
    &.special {
        position: relative;
        top: 10px;
    }
}

.shop-info-title {
    padding: 16px;
    font-size: 14px;
    color: #969799;
    white-space: nowrap;
}

.default-pic-box {
    box-sizing: border-box;
    width: inherit;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px 10px;
    .default-pic-box-item {
        height: 35px;
        border: 1px solid #ebedf0;
        padding: 1px;
        &.active {
            border-color: #155bd4;
            background: #e0edff;
            color: #3773da;
        }
        &:hover {
            border-color: #155bd4;
            background: #e0edff;
            color: #3773da;
        }
        .img-box {
            width: 100%;
            height: 100%;
        }
    }
}
.custom-btn {
    margin-top: 10px;
    width: 25%;
}
</style>
